<template>
  <div class="full-box line01">
    <v-chart class="chart" :option="chartOption" autoresize />
  </div>
</template>

<script>
import vChart from "vue-echarts";
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import {cloneDeep} from 'lodash'

export default {
  name: 'gauge01',
  cnName: '基础仪表盘',
  mixins: [refreshMixin],
  components: {vChart},
  data() {
    return {
      chartOption: {},
      cptData: []
    }
  },
  methods: {
    loadDataOk() {
      const attribute = this.option.attribute
      const clone = cloneDeep(attribute)
      const series = {
        type: 'gauge',
        ...clone.series
      }
      const tooltip = clone.tooltip
      this.setFormatter(tooltip)
      this.setFormatter(series.axisLabel)
      this.setFormatter(series.detail)

      series.radius = series.radius + '%'
      series.pointer.length = series.pointer.length + '%'

      series.data = this.cptData

      const opt = {
        tooltip,
        series
      }
      this.chartOption = opt
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadDataOk(newVal)
      },
      deep: true
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>

</style>
